<template>
    <yk-space dir="vertical" class="menu-bar" size="m">
          <router-link :to="item.path" v-for="item in navLinks" :key="item.path" class="menu-bar_nav">
            <yk-space align="center" size="m">
                <component :is="item.icon"/>
                <yk-text>{{ item.name }}</yk-text>
            </yk-space>
          </router-link>
  </yk-space>
</template>
<script lang="ts" setup>
import {navLinks} from '../../utils/menu'

</script>
<style lang="less" scoped>
.menu-bar{
  // width: 160px;
  padding: @space-l;
  top: 72px;
  left: 8px;
  position: fixed;
  &_nav{
    width: 160px;  //宽度
    height: 40px;  //高度
    border-radius: @radius-m;  //边框圆角
    background: @bg-color-l;
    padding: 0 @space-l;  //设置边距
    display: flex;         
    align-items: center;  //垂直居中
    text-decoration: none; //去掉字下面的划线
    .yk-icon{
       color: @font-color-ss;  //黑色
       width: 16px;
       height:16px;
    }
    &:hover{  //鼠标激活状态
      background: @bg-color-l;  //背景色:白色
      .yk-text{
        font-weight: 600;  //字体加粗
      }
    }
  } 
    .router-link-active{   //默认路由激活状态
      background:linear-gradient(180deg, var(--pcolor6) 0%, var(--pcolor8) 100%);
      .yk-icon{
        color: @bg-color-l; //白色
    }
    .yk-text{
        color: @bg-color-l;
        font-weight: 600;  //字体加粗
      }
    }
  }

</style>